<template>
	<div style="height:100%;">
		<div class="penalrow selectw100">
			<div class="inlineblock verticalmiddle infoitem"  v-if="showButton.add">
				<div class="inlineblock verticalmiddle">
					仪器名称
				</div>
				<div class="inlineblock verticalmiddle informationItem">
					<el-input size="mini" placeholder="仪器名称" v-model="demand.equipmentName" @keyup.enter.native = "doSearch" ></el-input>
				</div>
			</div>
			<div class="inlineblock verticalmiddle infoitem">
				<div class="inlineblock verticalmiddle">
					开始日期
				</div>
				<div class="inlineblock verticalmiddle informationItem">
					<el-date-picker size="mini" v-model="demand.bTime" type="date" placeholder="选择起始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
					 style="width:100%;" @change="doSearch">
					</el-date-picker>
				</div>
			</div>
			<div class="inlineblock verticalmiddle infoitem">
				<div class="inlineblock verticalmiddle">
					结束日期
				</div>
				<div class="inlineblock verticalmiddle informationItem">
					<el-date-picker size="mini" v-model="demand.eTime" type="date" placeholder="选择结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
					 style="width:100%;" @change="doSearch" :picker-options="pickerOptions">
					</el-date-picker>
				</div>
			</div>
			<el-button type="warning" size="mini" @click="doSearch" class="searchIcon">搜索</el-button>
			<el-button type="warning" size="mini" @click="emptySearch" class="searchIcon">清空</el-button>

		</div>
		<div :class="{'separaterowTable':showButton.add,'separaterowTable1':!showButton.add}">
			<div class="tableTittle" v-if="showButton.add">
				<div><span class="fontImpact">1</span><span>维修列表</span></div>
				<el-button type="primary" size="mini" @click="add" style="float:right" v-if="showButton.add && userOpernation.add.display">添加维修记录</el-button>
			</div>
			<el-table :data="tableData" style="width: 100%;" class="tableCon" size="mini" key="tableData">
				<el-table-column label="序号" min-width="50px">
					<template slot-scope="scope">
						{{scope.$index+(pageinfo.page - 1) * pageinfo.pageCount + 1}}
					</template>
				</el-table-column>
				<el-table-column label="仪器" min-width="100px" show-overflow-tooltip property="equipmentName">
				</el-table-column>
				<el-table-column label="设备编号" min-width="100px" show-overflow-tooltip property="code">
				</el-table-column>

				<el-table-column label="规格型号" min-width="100px" show-overflow-tooltip property="model">
				</el-table-column>

				<el-table-column property="date" label="维修日期" show-overflow-tooltip min-width="100px">
					<template slot-scope="scope">
						{{scope.row.hasOwnProperty('date')?scope.row.date.split(' ')[0]:'/'}}

					</template>
				</el-table-column>
				<el-table-column property="repairMan" label="维修人" min-width="100px">
				</el-table-column>
				<el-table-column property="faultDescription" label="故障描述" min-width="100px" show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="操作" min-width="70px">
					<template slot-scope="scope">
						<el-button size="mini" type="text" @click="add(scope.row,'look')">详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="block changepages">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageinfo.page" :page-sizes="[20, 30, 40]"
				 :page-size="pageinfo.pageCount" layout="total, sizes, prev, pager, next, jumper" :total="pageinfo.rowNumber">
				</el-pagination>
			</div>
		</div>
		<el-dialog class="maintain-record-dialog" :visible.sync="addRecordShow" width="70%" :show-close='false' :close-on-click-modal="false"
		 append-to-body>
			<span slot="title" class="dialog-title">
				{{flag=='look'?'查看':'新增'}}维修记录
			    <el-button  size="mini" class="popupClose" @click="close">关闭</el-button>
			  </span>
			<el-form label-width="110px" :inline="false" class="demo-form-inline form" :model="recordForm" :rules="recordRules" ref="recordForm"
			 clearable>
				<el-form-item label="仪器名称" prop='fRef'>
					<el-col :span="22">
						<el-select v-model="recordForm.fRef" filterable placeholder="仪器名称" size="mini" style="width: 100%;" :disabled="flag=='look'">
							<el-option v-for="item in equipmentList" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-col>
				</el-form-item>
				<el-form-item label="设备编号" prop='fRef'>
					<el-col :span="22">
						<el-select v-model="recordForm.fRef" filterable placeholder="设备编号" size="mini" style="width: 100%;" disabled>
							<el-option v-for="item in equipmentList" :key="item.id" :label="item.enterCode" :value="item.id">
							</el-option>
						</el-select>

					</el-col>
				</el-form-item>

				<el-form-item label="故障时间" prop='faultTime'>
					<el-col :span="22">
						<!--<el-input size="mini" placeholder="日期" v-model="recordForm.date"></el-input>-->
						<el-date-picker :disabled="flag=='look'" size="mini" v-model="recordForm.faultTime" type="date" value-format="yyyy-MM-dd"
						 placeholder="选择日期" style="width:100%;" @change="recordForm.date = ''" :picker-options="pickerOptions0">
						</el-date-picker>
					</el-col>
				</el-form-item>
				<el-form-item label="维修日期" prop='date'>
					<el-col :span="22">
						<el-date-picker :disabled="flag=='look'" style="width:100%;" size="mini" v-model="recordForm.date" type="date" value-format="yyyy-MM-dd"
						 placeholder="选择日期" :picker-options="pickerOptions1">
						</el-date-picker>
					</el-col>
				</el-form-item>
				<el-form-item label="维修单位/人" prop='repairMan'>
					<el-col :span="22">
						<el-input size="mini" placeholder="维修人" v-model="recordForm.repairMan" :disabled="flag=='look'"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="维修人电话" prop='phone'>
					<el-col :span="22">
						<el-input size="mini" placeholder="电话" v-model="recordForm.phone" :disabled="flag=='look'"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="故障描述" prop='faultDescription'>
					<el-col :span="22">
						<el-input type="textarea" size="mini" placeholder="故障描述" v-model="recordForm.faultDescription" :disabled="flag=='look'"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="维修结果" prop='maintenanceResults'>
					<el-col :span="22">
						<el-input type="textarea" size="mini" placeholder="维修结果" v-model="recordForm.maintenanceResults" :disabled="flag=='look'"></el-input>
					</el-col>
				</el-form-item>
			</el-form>
			<div class="elTab">
				<el-tabs style="width: 100%;">
					<el-tab-pane label="附件">
						<el-row v-if="(flag=='new' || flag=='edit') && userOpernation.upload.display">
							<el-button type="primary" size="mini" @click="hcUpload" style="float:right;margin-bottom:5px;">上传</el-button>
							<input type="file" @change="getFile" multiple="multiple" id="hc-file" style='visibility: hidden;width: 0;height: 0;'>
						</el-row>
						<el-table :data="recordForm.files" style="width: 100%;height:calc(100% - 43px)" size="mini" class="tableCon">
							<el-table-column label="序号" min-width="50px">
								<template slot-scope="scope">
									{{scope.$index+1}}
								</template>
							</el-table-column>
							<el-table-column property="name" label="附件名称" key="file" v-if="flag=='new' || flag=='edit'" min-width="200px" :show-overflow-tooltip="true">
							</el-table-column>
							<el-table-column property="fileName" label="附件名称" key="file1" v-if="flag=='look'||flag=='shenhe'" min-width="200px" :show-overflow-tooltip="true">
							</el-table-column>
							<el-table-column label="操作" min-width="100px">
								<template slot-scope="scope">
									<el-button type="text" size="mini" @click="removeTag(scope.$index)" v-if="(flag=='new' || flag=='edit') && userOpernation.download.display">删除</el-button>
									<el-button type="text" size="mini" @click="downLoadFile(scope.row)" v-if=" (flag=='look'||flag=='shenhe')">下载</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-tab-pane>
				</el-tabs>
			</div>
			<span slot="footer" class="dialog-footer">
			    <el-button type="primary" size="mini" @click='addConfirm' v-if="flag !='look'">确 定</el-button>
			    <el-button  size="mini" @click='close'>取 消</el-button>
			  </span>
		</el-dialog>
	</div>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		props: {
			showButton: Object,
			maintainRecordData:Object,
		},
		data() {
			let that = this;
			return {
				detailList: [],
				flag: 'new',
				totalFile: 0,
				equipmentList: [],
				addRecordShow: false,
				demand: {
					bTime: '',
					eTime: '',
					equipmentName: '',
					page: 1,
					pageCount: 20,
				},
				recordForm: {
					date: '',//维修时间
					faultTime: '', //故障时间      
					repairMan: '',//维修人
					faultDescription: '',//故障描述
					maintenanceResults: '',//维修结果
					fRef: '',
					phone: '',//维修人电话
					files: []//附件
				},
				recordRules: {
					fRef: [
						{ required: true, type: 'string', message: '请选择仪器名称', trigger: 'change' },
					],
					date: [
						{ required: true, message: '请选择维修时间', trigger: 'change' },
					],
					repairMan: [
						{ required: true, message: '请填写维修人', trigger: 'blur' }
					],
					faultDescription:[
						{ required: true, message: '请填写故障描述', trigger: 'blur' }
					]

				},
				tableData: [],
				pageinfo: {},
				userOpernation: {
					upload: {
						display: false
					},
					select: {
						display: false
					},
					add: {
						display: false
					},
					download: {
						display: false
					}
				},
				// 设置当前日期之前的不可用
				pickerOptions: {
					disabledDate(time) {
						if (that.demand.bTime != '') {
							let startDate = new Date(that.demand.bTime);
							return (time.getTime() < startDate.getTime());
						}
					}
				},
				pickerOptions0: {
					disabledDate(time) {
						return time.getTime() > Date.now() - 8.64e6;//如果没有后面的-8.64e6就是不可以选择今天的
					}
				},
				pickerOptions1: {
					disabledDate(time) {
						if (that.recordForm.faultTime != '') {
							let startDate = new Date(that.recordForm.faultTime);
							return (time.getTime() < startDate.getTime() - 8.64e7);
						}
					}
				},
			}
		},
		mounted() {

			this.init()
			if (this.$parent.userOpernation != undefined) {
				this.userOpernation.upload.display = this.$parent.userOpernation.upload.display;
				this.userOpernation.select.display = this.$parent.userOpernation.select.display;
				this.userOpernation.download.display = this.$parent.userOpernation.download.display;
				this.userOpernation.add.display = this.$parent.userOpernation.add.display;
			}
		},
		computed: {
			...mapState(['EmployeeByLabs']),
			tabDivHeight() {
				return (window.innerHeight - 260)
			}
		},
		watch: {
			addRecordShow(val) {
				if (val) {
					
					this.getEquipmentInfo();
				}
			}
		},


		methods: {
			emptySearch() {
				this.demand = {
					bTime: '',
					eTime: '',
					page: 1,
				};
				this.init();

			},
			close() {
				this.$refs.recordForm.resetFields();
				this.addRecordShow = false;

			},
			addConfirm() {
				this.$refs.recordForm.validate((valid) => { //表单验证
					if (valid) {
						this.createEquipmentRepair()
					} else {
						return false;
					}
				})
			},
			createEquipmentRepair() {
				let params = this.formDating(this.recordForm);
				this.$http({
					apiUrl: 'resource/createEquipmentRepair.htm',
					method: 'post',
					headers: { 'Content-Type': 'multipart/form-data' },
					params: params,
				}).then(res => {
					if (res.code == 0) {
						this.init()
						this.$message({
							showClose: true,
							message: '添加成功！',
							type: 'success'
						})
						this.close()
					}
				})
			},
			// 获取仪器维修详情getEquipmentRepairById.htm?id=
			getEquipmentRepairById(row) {
				return new Promise((resolve, reject) => {
					this.$http({
						apiUrl: 'resource/getEquipmentRepairById.htm',
						method: 'post',
						params: { id: row.id },
						isJson: false
					}).then(res => {
						if (res.code == 0) {
							// console.log(res)
							resolve(res)
						}
					})

				})

			},
			add(row, flag) {

				if (flag == "look") {
					this.getEquipmentRepairById(row).then(res => {
						this.flag = "look"
						this.recordForm = res.data;
						this.recordForm.files = res.data.fileList;
						this.addRecordShow = true;
					})
				} else {
					this.flag = "new"
					this.recordForm = {
						date: '',//维修时间
						faultTime: '', //故障时间      
						repairMan: '',//维修人
						faultDescription: '',//故障描述
						maintenanceResults: '',//维修结果
						fRef: '',
						phone: '',//维修人电话
						files: []//附件
					};
					this.addRecordShow = true;
				}
			},

			doSearch() {
				this.demand.page = 1;
				this.init()
			},
			init() {
				console.log(this.maintainRecordData,this.showButton)
				if(!this.showButton.add){
					this.demand.fRef = this.maintainRecordData.id;
				}

				this.$http({
					apiUrl: 'resource/readEquipmentRepairList.htm',
					method: 'post',
					params: this.demand,
				}).then(res => {
					if (res.code == 0) {
						this.tableData = res.data
						this.pageinfo = res.pageinfo
					}
				})
			},
			changeEquip(evnt, val) {
				console.log(evnt, val)
			},

			getEquipmentInfo() {

				this.$http({
					apiUrl: 'resource/getEquipmentInfo.htm',
					method: 'post',
					params: { name: '' },
				}).then(res => {
					if (res.code == 0) {
						this.equipmentList = res.data
					}
				})
			},
			detail() {
				this.detailShow = true
			},
			handleSizeChange(val) {
				this.demand.pageCount = val;
				this.init()
			},
			handleCurrentChange(val) {
				this.demand.page = val;
				this.init()
			},
			downLoadFile(item) {
				var url = "/download/fileDownload.htm"
        let token = sessionStorage.getItem('loginAccount')?sessionStorage.getItem('loginAccount'):undefined
				window.open(process.env.baseUrl + url + '?id=' + item.id + "&token=" + token);
			},
			hcUpload() {
				document.getElementById("hc-file").click()
			},

			formDating(params) {
				let fromArr = params
				let $formData = new FormData();
				for (let j in fromArr) {
					if ((typeof fromArr[j]) == 'object') {
						for (let i of fromArr[j]) {
							$formData.append(j, i);
						}
					} else {
						$formData.append(j, fromArr[j]);
					}
				}
				return $formData
			},
			removeTag(index) {
				this.recordForm.files.splice(index, 1)
			},

			getFile($event) {
				//				console.log($event.target.files);
				//				console.log(Array.from($event.target.files))
				let count = 0;
				//				this.recordForm.files = $event.target.files
				for (let i of $event.target.files) {
					count = 0
					for (let j of this.recordForm.files) {
						if (i.name == j.name) {
							count += i.name
						}
					}
					if (count == 0) {
						this.recordForm.files.push(i)
					} else {
						this.$message({
							showClose: 'true',
							message: '重复添加，已过滤！',
							type: 'success'
						})
					}

				}
				this.totalFile = this.recordForm.files.length
				$event.target.value = "";
			},
		}
	}

</script>

<style lang="scss">
	.maintain-record-dialog {
		.el-dialog {
			height: 80%;
			margin-top: 10vh !important;
			.el-dialog__body {
				height: calc(100% - 85px);
				padding: 15px;
			}
		}
	}

	.separaterowTable1 {
		height: calc(100% - 50px);
	}

	.separaterowTable1 .el-table.tableCon {
		height: calc(100% - 38px);
	}
</style>
<style>
	.maintain-record-dialog .el-form .el-form-item {
		width: 48%;
		display: inline-block;
		margin-bottom: 10px;
	}

	.maintain-record-dialog .form {
		height: 220px;
	}

	.maintain-record-dialog .el-dialog .elTab {
		clear: both;
		height: calc(100% - 220px)
	}

	.maintain-record-dialog .el-dialog .elTab .el-tabs {
		height: 100%
	}

	.maintain-record-dialog .el-dialog .elTab .el-tabs .el-tabs__content {
		height: calc(100% - 40px)
	}

	.maintain-record-dialog .el-dialog .elTab .el-tabs .el-tabs__content .el-tab-pane {
		height: 100%
	}
</style>